<!--省客户插件模板-->
<template>
  <div v-show="formData[key].isshow">
    <el-form-item :label="component.attrName" :id="key" :prop="key + '.value'" :required="formData[key].required.split(',').includes('empty')">
      <div @click="clickHandler" class="click-wrap">
        <el-input
          v-model="formData[key].value"
          readonly
          class="hide"
        ></el-input>
        <el-input v-model="formData[key].text" >
          <template slot="append">
            <a href="javascript:;">
              <i class="el-icon-more"></i>
            </a>
          </template>
        </el-input>
      </div>
    </el-form-item>
    <province
      @updateshow="custPickerShowHandler"
      @pickerEnd="getrow"
      @prohsChange="provinceCustList"
      :queryLoading="loading"
      :show="show"
      :Data="provData"
    >
    </province>
  </div>
</template>

<script>
import { mapState } from "vuex";
import Province from "./province.vue";
import OrderService from "@/api/order/OrderService.js";
export default {
  name: "ProvinceCustomer",
  components: {
    Province,
  },
  data() {
    return {
      show: false,
      currentValue: "",
      total: 0,
      pageIndex: 1,
      pageSize: 10,
      loading: false,
      showValue: "",
      provData: {},
      userInfo: {},
    };
  },
  props: {
    component: {
      type: Object,
      default: () => {
        return {};
      },
    },
    formData: {
      type: Object,
    },
    ruleData: {
      type: Object,
    },
    actionValue: {
      type: String,
      default: "",
    },
    span: {
      type: Number || String,
      default: 16,
    },
    config: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    ...mapState("user", ["user"]),
    key() {
      return this.component.pageTempStructId + "-" + this.component.attrId;
    },
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem("crm3-userinfo")) || {};
  },
  methods: {
    clickHandler() {
      this.show = true;
      this.provinceCustList();
    },
    //父级更改控制dialog的显示隐藏
    custPickerShowHandler(val) {
      this.show = val;
    },
    async provinceCustList(provPageInfo) {
      if(provPageInfo){
        const {pageSize,pageIndex} = provPageInfo 
        this.pageIndex = pageIndex
        this.pageSize = pageSize
      }
      //加载省客户关系
      let parmas = {
        qryType: "INTERFACE",
        PageFlag: "1", //固定
        custName: JSON.parse(sessionStorage.getItem("changeRow")).useCustName, //客户名称
        provRegionCode: this.user.regionCode,
        commonRegionId: this.user.regionId,
        listShowFlag: "orderShow", //固定
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
      };
      this.loading = true;
      try {
        let result = await OrderService.provinceCustList(parmas);
        if (result.code == 200) {
          if (
            result.meta.customer instanceof Array &&
            result.meta.customer.length > 0
          ) {
            this.provData = result.meta;
          }
        }
        this.loading = false;
      } catch {
        this.loading = false;
      }
    },

    async getrow(row) {
      this.formData[this.key].value = row["custId"];
      this.formData[this.key].text = row["custId"];
      let param = {
        actType: "ADD",
        custId: JSON.parse(sessionStorage.getItem("changeRow")).custId,
        provinceCustId: row.custId,
        jtCustNumber: JSON.parse(sessionStorage.getItem("changeRow"))
          .custNumber,
        provinceCustNumber: row.custNumber,
        provinceCustName: row.custName,
        provinceId: row.commonRegionId,
        lanId: row.commonRegionId,
        staffId: this.user.staffId,
        statusCd: "1000",
      };
      let result = await OrderService.insertProvinceCustRel(param);
      this.show = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.hide {
  z-index: 0;
  visibility: hidden;
  width: 1px;
  position: absolute;
}
.empty {
  height: 80px;
}
.el-icon-more {
  font-size: 20px;
}
.click-wrap {
  ::v-deep .el-input-group--append .el-input__inner,
  .el-input-group__prepend {
    cursor: pointer;
  }
}
</style>